<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
	
		<u-sticky>
			<selectBar :filterData="filterData" :defaultSelected ="defaultSelected" @confirm="confirm"></selectBar>
		</u-sticky>
		
		<view class="car-addrtime">
			<view class="addrtime-box" @click="openLocationSelect()">
				<block v-if="$gain_info.type===1">
					<text class="pick-address">{{$gain_info.title}}</text>
				</block>
				<block v-if="$gain_info.type===2">
					<text class="pick-address">{{$gain_info.storeName}}</text>
				</block>
				<text class="divider"></text>
				<text class="pick-time">{{start_date.timestamp | date('mm-dd hh:MM')}} - {{end_date.timestamp | date('mm-dd hh:MM')}}</text>
				<u-icon name="edit-pen" size="20"></u-icon>
			</view>
		</view>
		
		<location-select ref="locationRental" @submit="locationRentalConfirm"></location-select>
		
		<view class="page-car-content">
			<view class="car-list">
				<view class="VerticalBox" :style="[{height:'calc(100vh - ' + ($u.sys().statusBarHeight + 154) + 'px)'}]">
					<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
						<view class="cu-item" :class="item.id==pid?'text-green cur':''" v-for="(item,index) in carClass" :key="index" @tap="TabSelect(item.id,index)">
							<view class="tab-name" v-if="item.pid===0">{{item.name}}</view>
							<view class="tab-name tab-sub" v-else>-{{item.name}}</view>	
							<!-- <view class="tag-price">{{item.price}}</view> -->
						</view>
					</scroll-view>
					<scroll-view class="VerticalMain" scroll-y scroll-with-animation lower-threshold="80" @scrolltolower="moreCar">
						<!-- <u-transition :show="item.show" mode="fade-right"> -->
						<view class="VerticalItem transition">
							<block v-if="isempty">
								<u-empty mode="list" text="暂无匹配车辆" icon="/static/images/empty/list.png"></u-empty>
							</block>
							<view else>
								<block v-for="(item,index) in carList" :key="index">
									<carItem :carInfo="item" @select="selectCar" @showCarContent="showCarContent"></carItem>
								</block>
								<u-loadmore :status="page_status" line/>
							</view>
						</view>
						<!-- </u-transition> -->
					</scroll-view>
				</view>
			</view>
			<!-- <view class="car-list--empty">
			    <text class="i"></text>
			    <text class="p">没有找到你想要的车，换个条件再试试吧！</text>
			    <u-button>清空全部筛选</u-button>
			</view> -->
			
		</view>
		
		<car-content ref="carContent" :car_id="car_id"></car-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import carItem from '../components/carItem.vue'
	import uPage from '@/common/page'
	import selectBar from '../components/selectBar.vue'
	export default {
		components:{
			carItem,
			selectBar
		},
		data() {
			return {
				nav_title:'选择车型',
				defaultSelected: [],
				filterData: [],
				post_filter:[],
				tabCur: 0,			//分类选项卡的ID
				mainCur: 0,
				carList:[],
				carClass:[],		//分类数组
				pid:0,				//分类ID
				verticalNavTop: 0,
				searchData:{},
				page_status:"loadmore",
				page_data:{},
				isempty:false,
				car_id:0,				//当前选中的车辆ID，用于显示车辆信息
			}
		},
		onLoad(){			
			this.$u.api.carFilter().then(res=>{
				this.filterData = res.data
			})
			
			this.getCarList()
		},
		onShow(){
			this.initData()
		},
		computed:{
			...mapState({
				$gain_info:state => state.$gainInfo,			//避免命名与组件冲突
				$back_info:state => state.$backInfo,
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				is_drive:state => state.$isDrive,
			})
		},
		methods: {
			initData(){
				//判断是否选择了日期
				if(this.start_date.timestamp===0 || this.end_date.timestamp===0){
					this.$c.a('index/index')
					return false
				}
				// this.$c.toBack(-1,true)
			},
			confirm(data){
				this.post_filter=JSON.stringify(data.value)
				// 清空汽车列表数据
				this.clsCarView()
				this.getCarList()
			},
			getCarList(page={}){
				if(this.page_data.end || this.page_status=='loading'){
					return;
				}else{
					this.isempty=false;			//加载数据时隐藏空提示
					this.page_status='loading';
				}
				
				let post={
					start_date:this.start_date.timestamp,
					end_date:this.end_date.timestamp,
					gain_store:this.$gain_info.store,
					back_store:this.$back_info.store,
					screen_store:this.$gain_info.screenStore,
					gain_type:this.$gain_info.type,
					back_type:this.$back_info.type,
					filter:this.post_filter,
					pid:this.pid,
					page:page.number || 1,
					is_drive:this.is_drive,
				}
				uni.$u.api.carList(post).then(res=>{
					this.carList=this.carList.concat(res.data.car_list.list);
					this.isempty=this.carList.length>0?false:true;		//是否为空
					this.carClass=res.data.class_list;
					// 分页
					this.page_data=uPage.setData(res.data.car_list);
					this.page_status=this.page_data.load;
				}).catch(e=>{
					this.$c.info('获取车型列表失败');
				})
			},
			//切换选显卡
			TabSelect(pid,index) {
				this.pid=pid;
				this.verticalNavTop = (index - 1) * 50
				// 清空汽车列表数据
				this.clsCarView()
				this.getCarList()
			},
			//清空列表
			clsCarView(){
				this.carList=[]
				this.page_data={}
			},
			//选中车型
			selectCar(item){
				let id=item.id
				this.$store.commit('setCarID',id)
				this.$c.a('flow/create/index')
			},
			
			// 打开租车地址选择
			openLocationSelect(){
				this.$refs.locationRental.open()
			},
			// 租车信息发生变化
			locationRentalConfirm(){
				// 清空汽车列表数据
				this.clsCarView()
				this.getCarList()
			},
			// 更多汽车
			moreCar() {
				this.getCarList(this.page_data);
			},
			// 显示车辆信息
			showCarContent(id){
				this.$refs.carContent.open(id);
			}
		}
	}
</script>

<style lang="scss">
	.page-car-content{

	}
	.car-list {
	    position: relative;
	    padding: 0;
	    background: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.car-list.x-panel {
	    margin: 0;
	}
	
	.car-list .load-more {
	    position: relative;
	    display: block;
	    width: 160rpx;
	    margin: 0 auto;
	    padding-left: 30rpx;
	    color: #999;
	    font-size: 24rpx;
	    line-height: 80rpx;
	    text-align: center;
	}
	
	.car-list .load-more .x-loading__spin {
	    position: absolute;
	    top: 20rpx;
	    left: 0;
	    width: 40rpx;
	    height: 40rpx;
	}
	
	.car-list .load-more .x-loading__spin_circular {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    margin: auto;
	    transform-origin: center center;
	    animation: __x_loading_rotate 2s linear infinite;
	}
	
	.car-list .load-more .x-loading__spin_path {
	    animation: __x_loading_dash 1.5s ease-in-out infinite;
	    stroke: #0b4;
	    stroke-dasharray: 1,200;
	    stroke-dashoffset: 0;
	    stroke-linecap: round;
	}
	
	.car-list--empty {
	    position: relative;
	    padding: 135rpx 85rpx;
	}
	
	.car-list--empty .i {
	    display: block;
	    width: 100rpx;
	    height: 100rpx;
	    margin: 0 auto;
	    background: url() 50% no-repeat;
	    background-size: 100rpx;
	}
	
	.car-list--empty .p {
	    display: block;
	    margin-top: 40rpx;
	    margin-bottom: 80rpx;
	    color: #666;
	    font-size: 24rpx;
	    text-align: center;
	}
	
	.aui-ellipsis-1 {
	    display: block;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	.VerticalNav.nav {
		width: 120upx;
		height: 100%;
		background-color: #FEFEFE;
		white-space: initial;
		border:0px;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #FEFEFE;
		border-left: 8rpx solid #FEFEFE;
		margin: 0;
		border: none;
		height: 80rpx;
		font-size: 26rpx;
		font-weight: 700;
		display: flex;
		flex-direction: column;
		justify-content:center;
		align-items:flex-start;
		padding-left: 20rpx;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #FFFFFF;
		border-left: 8rpx solid var(--view-theme);
	}
	.VerticalNav.nav .cu-item.cur .tab-name {
		color: var(--view-theme);
	}
	.VerticalNav.nav .cu-item .tab-sub {
		font-size: 18rpx;
	}
	.VerticalNav.nav .cu-item .tag-price {
		font-size: 20rpx;
		color: rgba(60,60,90,.6);
	}
	
	.VerticalBox {
		width: 100%;
		display: flex;
	}
	
	.VerticalMain {
		height: 100%;
		background-color: #FFFFFF;
		flex: 1;
	}
	
	.VerticalItem{
		padding: 20rpx;
		padding-left: 10rpx;
		padding-right: 20rpx;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 30rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 1.6em;
	}
	
	.car-addrtime{
		margin: 0rpx;
		padding: 15rpx;
		background-color: $u-bg-color;
	}
	
	.addrtime-box{
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		min-height: 8rpx;		
		color: #3c3c5a;
		padding: 15rpx;
		font-size: 24rpx;
		text-align: center;
		border: .02rem solid rgba(60,60,90,.07);
		border-radius: 10rpx;
		box-shadow: 0 0 0.3rem rgba(30,94,154,.07);
		background-color: #FFFFFF;
	}
	
	.addrtime-box .pick-address {
	    -webkit-flex: 1 1;
	    flex: 1 1;
	    padding-right: .2rem;
	    overflow: hidden;
	    white-space: nowrap;
	    text-align: left;
	    text-overflow: ellipsis;
	}
	
	.addrtime-box .divider{
		height: 28rpx;
		border-right: 1px solid rgba(60,60,90,.1);
	}
	
	.addrtime-box .pick-time {
	    padding-left: 10rpx;
		padding-right:10rpx;
	}

</style>
